<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no,maximum-scale=1">
    <title>单词排列-八卦</title>
    <style>
        * {
            margin: 0;padding: 0;
        }

        #container-box {
            width: 1000px;
            height: 1410px;
            background-color: rgb(250,250,250);
            box-sizing: border-box;
            margin: 0 auto;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-content: center;
        }
        .container {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            /*background-color: #f5f2f0;*/
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            /*background-color: #b3d4fc;*/
        }

        .item {
            /*width: 200px;*/
            /*height: 200px;*/
            box-sizing: border-box;
            /*border-radius: 50%;*/
            transform-origin: 50% 50%;
            display: flex;
            align-items: center;
            flex-direction: column;
            overflow: hidden;
            font-size: 18px;
            /*border: 1px solid #b3d4fc;*/
        }

        .bottom {
            transform: rotate(180deg);
        }

        .item:nth-child(1), .item:nth-child(3), .item:nth-child(7), .item:nth-child(9), .item:nth-child(5) {
            justify-content: center;
        }

        .item:nth-child(1), .item:nth-child(3), .item:nth-child(7), .item:nth-child(9) {
            padding-top: 50px;
        }

        .item:nth-child(1) {
            transform: rotate(-45deg);
        }

        .item:nth-child(4) {
            transform: rotate(-90deg);
        }

        .item:nth-child(7) {
            transform: rotate(-135deg);
        }

        .item:nth-child(8) {
            transform: rotate(180deg);
        }

        .item:nth-child(9) {
            transform: rotate(135deg);
        }

        .item:nth-child(6) {
            transform: rotate(90deg);
        }

        .item:nth-child(3) {
            transform: rotate(45deg);
        }

        .arrow {
            /*width: 100px;*/
            /*height: 15px;*/
            position: relative;
            /*background-color: #795da3;*/
            /*background-image: url("./src/img/arrow.png");*/
            background-position: center center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: 5px;
            margin-bottom: 5px;
            /*margin-bottom: 15px;*/
        }

        .arrow img {
            width: 100%;
            height: 100%;
        }

        .arrow-reverse {
            transform-origin: 50% 50%;
            transform: rotate(180deg);
            margin-top: 15px;
        }

        #words {
            width: 100%;
            height: 150px;
        }

        #form {
            width: 100%;
            margin-top: 20vw;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
        }
        button {
            margin-top: 20px;
            width: 200px;
            height: 35px;
            font-size: 20px;
            /*background-color: #b3d4fc;*/
        }

    </style>
</head>
<body>
<div id="form">
    <textarea id="words" placeholder="单词逗号或 . 隔开" >catalog.extraordinary.extreme.agent.alcohol.appeal .appreciate.approve.stimulate.acquireaccomplish.tide.torture.wander.weave.preserve.academic.academy.career.oblige.apple, banana, cat, dog, elephant, fish, grape, horse, ice cream, juice, kiwi, lemon, mango, orange, pear, queen, rabbit, strawberry,apple, banana, cat, dog, elephant, fish, grape, horse, ice cream, juice, kiwi, lemon, mango, orange, pear, queen, rabbit, strawberry</textarea>
    <button onclick="test()">提 交</button>
</div>
<div id="container-box">
    <div class="container" id="container1"></div>
    <div style="width: 100%;display: flex;flex-wrap: nowrap;justify-content: space-between">
        <div class="container" id="container2"></div>
        <div class="container" id="container3"></div>
    </div>
</div>

<script>
    function createDoc(words) {
        let container_arr = {
            container1: {
                el: document.getElementById("container1"),
                html: '',
            },
            container2: {
                el: document.getElementById("container2"),
                html: '',
            },
            container3: {
                el: document.getElementById("container3"),
                html: '',
            },
        }
        let word_length = 54
        for(let index=0; index<word_length; index=index+2) {
            let container = container_arr["container"+String((Math.floor(index/18)+1))]
            let boxWidth = container.el.offsetWidth
            let itemWidth = boxWidth / 3 - 1
            let arrowWidth = itemWidth / 2
            let arrowHeight = arrowWidth / 7
            // console.log("boxWidth = ",boxWidth)
            // console.log("itemWidth = ",itemWidth)
            let html = ''
            let word1 = words[index]
            let word2 = words[index + 1]
            container.html += `
    <div class="item" style="width: ${itemWidth}px;height: ${itemWidth}px">
        <div class="top">${word1}</div>
        <div class="arrow" style="width: ${arrowWidth}px;height: ${arrowHeight}px"><img src="../src/img/arrow.png" alt=""></div>
        <div class="arrow arrow-reverse" style="width: ` + arrowWidth+`px;height: ` + arrowHeight + `px"><img src="../src/img/arrow.png" alt=""></div>
        <div class="bottom">${word2}</div>
    </div>
`
        }
        container_arr.container1.el.innerHTML = container_arr.container1.html
        container_arr.container2.el.innerHTML = container_arr.container2.html
        container_arr.container3.el.innerHTML = container_arr.container3.html

    }

    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    function test() {
        let words = document.getElementById("words").value
        words = words.replace(/，/g,'.')
        words = words.replace(/,/g,'.')
        let word_arr = words.split('.')
        word_arr = shuffleArray(word_arr)
        // console.log("word_arr = ",word_arr)
        if (word_arr.length < 54) {
            let short_num = 54-word_arr.length
            for(let i=0; i< short_num; i++) {
                word_arr.push("")
            }
            // alert("不足18个单词")
            // return
        }
        document.getElementById('container-box').style.display = "flex"
        document.getElementById('form').style.display = "none"
        createDoc(word_arr)
    }

    // test()
</script>
</body>
</html>